<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:replace="common/base::pagetitle"></title>
    <link th:replace="common/base::static"/>
    <style>

    </style>
</head>
<body style="background-color: #f2f2f2;">

<div id="kPage" class="layui-fluid" style="padding: 0">
    <div class="layui-row">
        <!-- 主要内容块 -->
        <div class="layui-col-md12" id="kMainContentCol">
            <div class="layui-fluid kvf-fluid-padding15">
                <div class="layui-card">
                    <div class="layui-row">
                        <div class="layui-col-sm12">
                            <button type="button" class="layui-btn layui-btn-sm" data-event="getContent"><i class="layui-icon layui-icon-code-circle"></i>获取内容</button>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" data-event="getHtml"><i class="layui-icon layui-icon-fonts-html"></i>获取html</button>
                            <span>使用<a style="color: #1E9FFF" href="http://fex.baidu.com/ueditor/" target="_blank">百度Ueditor</a></span>
                        </div>
                        <div class="layui-col-md12">
                            <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script th:replace="common/base::ueditorjs"></script>

<script type="text/javascript" th:inline="javascript">
    layui.use(['element', 'form', 'layer', 'table'], function () {
        var elemet = layui.element, form = layui.form, layer = layui.layer, table = layui.table;

        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor', {
            toolbars: [
                [
                    'source', //源代码
                    // 'anchor', //锚点
                    'undo', //撤销
                    'redo', //重做
                    'bold', //加粗
                    'indent', //首行缩进
                    'snapscreen', //截图
                    'italic', //斜体
                    'underline', //下划线
                    'strikethrough', //删除线
                    'subscript', //下标
                    'fontborder', //字符边框
                    'superscript', //上标
                    'formatmatch', //格式刷
                    'blockquote', //引用
                    'pasteplain', //纯文本粘贴模式
                    'selectall', //全选
                    'print', //打印
                    'preview', //预览
                    'horizontal', //分隔线
                    'removeformat', //清除格式
                    // 'time', //时间
                    // 'date', //日期
                    // 'unlink', //取消链接
                    'insertrow', //前插入行
                    'insertcol', //前插入列
                    'mergeright', //右合并单元格
                    'mergedown', //下合并单元格
                    'deleterow', //删除行
                    'deletecol', //删除列
                    'splittorows', //拆分成行
                    'splittocols', //拆分成列
                    'splittocells', //完全拆分单元格
                    'deletecaption', //删除表格标题
                    'inserttitle', //插入标题
                    'mergecells', //合并多个单元格
                    'deletetable', //删除表格
                    'cleardoc', //清空文档
                    'insertparagraphbeforetable', //"表格前插入行"
                    'insertcode', //代码语言
                    'fontfamily', //字体
                    'fontsize', //字号
                    'paragraph', //段落格式
                    'simpleupload', //单图上传
                    'insertimage', //多图上传
                    'edittable', //表格属性
                    'edittd', //单元格属性
                    'link', //超链接
                    'emotion', //表情
                    'spechars', //特殊字符
                    // 'searchreplace', //查询替换
                    'map', //Baidu地图
                    // 'gmap', //Google地图
                    'insertvideo', //视频
                    'help', //帮助
                    'justifyleft', //居左对齐
                    'justifyright', //居右对齐
                    'justifycenter', //居中对齐
                    'justifyjustify', //两端对齐
                    'forecolor', //字体颜色
                    'backcolor', //背景色
                    'insertorderedlist', //有序列表
                    'insertunorderedlist', //无序列表
                    'fullscreen', //全屏
                    'directionalityltr', //从左向右输入
                    'directionalityrtl', //从右向左输入
                    // 'rowspacingtop', //段前距
                    // 'rowspacingbottom', //段后距
                    // 'pagebreak', //分页
                    'insertframe', //插入Iframe
                    // 'imagenone', //默认
                    // 'imageleft', //左浮动
                    // 'imageright', //右浮动
                    'attachment', //附件
                    // 'imagecenter', //居中
                    // 'wordimage', //图片转存
                    // 'lineheight', //行间距
                    // 'edittip ', //编辑提示
                    'customstyle', //自定义标题
                    'autotypeset', //自动排版
                    // 'webapp', //百度应用
                    // 'touppercase', //字母大写
                    // 'tolowercase', //字母小写
                    'background', //背景
                    'template', //模板
                    'scrawl', //涂鸦
                    // 'music', //音乐
                    'inserttable', //插入表格
                    'drafts', // 从草稿箱加载
                    'charts', // 图表
                ]
            ]
        });

        var active = {
            getContent: function () {
                alert(getContent());
            },
            getHtml: function () {
                alert(getAllHtml());
            }
        };

        kvfKit.activeInit(active);


        function getAllHtml() {
            return UE.getEditor('editor').getAllHtml();
        }

        function getContent() {
            var arr = [];
            arr.push(UE.getEditor('editor').getContent());
            return arr.join("\n");
        }
    });
</script>

</body>
</html>